import "./index.css";
import {View} from "@tarojs/components";
import Footer from '../../components/Footer'
import {AtButton, AtRadio} from "taro-ui";
import {useEffect, useState} from "react";
import questionList from '../../data/question.json';
import Taro from "@tarojs/taro";

export default () => {

  //当前答案
  const [value, setValue] = useState()
  //用户答案列表
  const [answerLsit] = useState([])
  //当前题号
  const [current, setCurrent] = useState(1)
  //当前题目
  const [currentQuestion, setCurrentQuestion] = useState(questionList[0])

  const questionOption = currentQuestion.options.map(item => {
    return {label: `${item.key}.  ${item.value}`, value: item.key,}
  })

  useEffect(() => {
    setCurrentQuestion(questionList[current - 1])
    setValue(answerLsit[current - 1])
  }, [current])

  return (

    <View className='doQuestion'>
      {/*{JSON.stringify(answerLsit)}*/}
      <View className='at-article__h1 titele1'>
        {current}: {currentQuestion.title}
      </View>

      <View className="qustion">
        <AtRadio
          options={questionOption}
          value={value}
          onClick={(vaule) => {
            handleChange(vaule)
          }}

        />
      </View>
      {
        current < questionList.length &&
        (<AtButton
          type='primary'
          className='startbut'
          circle={true}
          onClick={() => {
            setCurrent(current + 1)
          }}
          disabled={!value}
        >
          下一题
        </AtButton>)
      }

      {
        current == questionList.length &&
        (<AtButton type='primary'
          className='startbut but2'
          circle={true}
          disabled={!value}
          onClick={() => {
            try {
              Taro.setStorageSync('answerLsit', answerLsit)
            } catch (e) { }
             Taro.navigateTo({
               url: '/pages/result/index',
             })
           }}
        >
          查看结果
        </AtButton>)
      }

      {
        current > 1 &&
        (<AtButton type='primary' className='startbut but3' circle={true} onClick={() => {
          setCurrent(current - 1)
        }}
        >
          上一题
        </AtButton>)
      }


      <Footer/>
    </View>
  );

  function handleChange(v) {
    console.log(v)
    // @ts-ignore
    answerLsit[current - 1] = v
    setValue(v)
  }
};
